<%@page contentType="text/html;charset=UTF-8"%>
<%@include file="../../common.jsp"%>
<!DOCTYPE HTML>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>Project Infor</title>
	<link href="${ctx}/resources/css/project/project.css" rel="stylesheet">
	<link href="${ctx}/resources/font-awesome/css/font-awesome.min.css" rel="stylesheet">
	<link href="${ctx}/resources/css/bootstrap/bootstrap.min.css" rel="stylesheet">
	<script type="text/javascript" src="${ctx}/resources/js/jquery/jquery-1.12.0.min.js"></script>
	<script type="text/javascript" src="${ctx}/resources/js/bootstrap/bootstrap.min.js"></script>
	<c:set var="active" value="variables"/>

</head>
<body>
	<div class="container">
		<div class="row">

		<div class="col-md-10">
			<div class="bs-callout help-callout">
				<p>				ReplicationController配置 				

				</p>
			</div>
			<form accept-charset="UTF-8" action="${ctx}/replication/save" class="form-horizontal" id="edit" method="post">
				<div style="display:none">
				<input id="oldName" name="oldName" type="hidden" value="${controller.metadata.name}">
				<input id="oldNamespace" name="oldNamespace" type="hidden" value="${controller.metadata.namespace}">
				</div>
				<fieldset>
				<div class="form-group">
					<label class="control-label" for="name">名称</label>
					<div class="col-sm-10">
						<input class="form-control" id="name" name="name" required type="text" value="${controller.metadata.name}">
					</div>
				</div>
				
				<div class="form-group">
					<label class="control-label" for="namespace">Namespaces</label>
					<div class="col-sm-10">
						<!--input class="form-control" id="port" name="port" type="text" value="${pod.metadata.namespace}"-->
						<select class="form-control" id="namespace" name="namespace">
							<c:forEach items="${namespaces.items}" var="ns" varStatus="nsStatus">
						 	<option value="${ns.metadata.name}">${ns.metadata.name}</option>
							</c:forEach>
					     </select>
					</div>
				</div>
				<div class="form-group">
					<label class="control-label" for="selector">Selector</label>
					<div class="col-sm-10">
						<input class="form-control" id="selector" name="selector" required type="text" value="${controller.spec.selector}">
						<div class="light">多个元素之间以","分隔.</div>
					</div>
				</div>
				<div class="form-group">
					<label class="control-label" for="replicas">replicas</label>
					<div class="col-sm-10">
						<input class="form-control" id="replicas" name="replicas" required type="number" value="${controller.spec.replicas}">
					</div>
				</div>
				
				</fieldset>
				<div class="form-actions">
					<input class="btn btn-save" name="commit" type="button" onClick="doSave();"  value="Save changes">
					<a class="btn pull-right" href="${ctx}/k8/controllers?type=controllers">返回</a>
				</div>
			</form>
		</div>
	</div>
</div>

<script language="javascript">
	var containers = [];

	setNS('${controller.metadata.namespace}');
	setProtocol('${service.spec.ports[0].protocol}');
	setType('${service.spec.type}');

	function setProtocol(protocol){
		$("#protocol").find("option[value='"+protocol+"']").attr("selected",true);
	}
	function setNS(ns){
		$("#namespace").find("option[value='"+ns+"']").attr("selected",true);
	}
	function setType(type){
		$("#type").find("option[value='"+type+"']").attr("selected",true);
	}
	
	
	function doSave(){
	
		if($('#name').val()==''){
			alert('container name 不能为空.');
			return ;
		}

		if($('#replicas').val()==''){
			alert('replicas  最小值为1.');
			return ;
		}

		
		var controller = {};
		controller.oldName=$('#oldName').val();
		controller.oldNamespace=$('#oldNamespace').val();
		
		controller.name=$('#name').val();
		controller.node = $('#node').val();
		controller.namespace = $('#namespace').val();
		
		controller.selector = $('#selector').val();
		controller.replicas = $('#replicas').val();
		
		$.ajax({
		  type: 'POST',
		  url: ctx+'/replication/save?type=controllers',
		  data: JSON.stringify(controller),
		  contentType: "application/json; charset=UTF-8",
		  success: function(data){
		  	alert('保存成功.');
		  },
		  dataType: 'json'
		});

	}
	
	function addContainer(){
		if($('#container_name').val()==''){
			alert('container name 不能为空.');
			return;
		} 
		if($('#container_image').val()==''){
			alert('container image 不能为空.');
			return;
		}
		
		for(var i=0;i<containers.length;i++){
			if(containers[i].name==$('#container_old_name').val()){
				containers.splice(i,1);
			}
		}
		
		var container ={};
		container.name = $('#container_name').val();
		container.image = $('#container_image').val();
		//container.args = $('#container_args').val();
		container.imagePullPolicy = $('#container_imagePullPolicy').val();
		
		
		var port = {};
		
		if($('#container_hostPort').val() !=''){
			port.hostPort = $('#container_hostPort').val();
		}
		
		if($('#container_containerPort').val() !=''){
			port.containerPort = $('#container_containerPort').val();
		}
		
		if($('#container_protocol').val() !=''){
			port.protocol = $('#container_protocol').val();
		}
		
		/**
		*
		*/
		
		var port1 = {};
		
		if($('#container_hostPort2').val() !=''){
			port1.hostPort = $('#container_hostPort2').val();
		}
		
		if($('#container_containerPort2').val() !=''){
			port1.containerPort = $('#container_containerPort2').val();
		}
		
		if($('#container_protocol2').val() !=''){
			port1.protocol = $('#container_protocol2').val();
		}
		/**
		* ports.
		*/
		if(port.hostPort != undefined || port.containerPort != undefined || port.protocol != undefined
			|| port1.hostPort != undefined || port1.containerPort != undefined || port1.protocol != undefined){
			container.ports=[];
			
			if(port.hostPort != undefined || port.containerPort != undefined || port.protocol != undefined){
				container.ports.push(port);
			}
			
			if(port1.hostPort != undefined || port1.containerPort != undefined || port1.protocol != undefined){
				container.ports.push(port1);
			}
		}
		/**
		* resources
		*/
		if($('#container_cpu').val() !='' || $('#container_mem').val()!='' ){
			//data.data[i].resources.limits.cpu
			container.resources={};
			container.resources.limits={};
			
			if($('#container_cpu').val() !=''){
				container.resources.limits.cpu=  $('#container_cpu').val();
			}
			
			if($('#container_mem').val() !=''){
				container.resources.limits.memory= $('#container_mem').val();
			}
		}		
		
		
		containers.push(container);
		
		$('#myModal').modal('hide');
	}
	
	function viewContainer(containerName){
		
		$('#editCon')[0].reset();	
		
		$.getJSON(ctx+'/pod/viewContainer?name=${pod.metadata.name}&namespace=${pod.metadata.namespace}',function (data){
			if(data != null && data.data != null){
				containers = data.data;
				
				for(var i=0;i<data.data.length;i++){
					if(data.data[i].name==containerName){
						$('#container_old_name').val(data.data[i].name);
						$('#container_name').val(data.data[i].name);
						$('#container_image').val(data.data[i].image);
						
						if(data.data[i].ports.length==1){
							$('#container_hostPort').val(data.data[i].ports[0].hostPort);
							$('#container_containerPort').val(data.data[i].ports[0].containerPort);
							$('#container_protocol').val(data.data[i].ports[0].protocol);
						}
						if(data.data[i].ports.length==2){
							$('#container_hostPort').val(data.data[i].ports[0].hostPort);
							$('#container_containerPort').val(data.data[i].ports[0].containerPort);
							$('#container_protocol').val(data.data[i].ports[0].protocol);
							
							$('#container_hostPort2').val(data.data[i].ports[1].hostPort);
							$('#container_containerPort2').val(data.data[i].ports[1].containerPort);
							$('#container_protocol2').val(data.data[i].ports[1].protocol);
						}
						$('#container_args').val(data.data[i].args);
						$('#container_imagePullPolicy').val(data.data[i].imagePullPolicy);

						if(data.data[i].resources !=null && data.data[i].resources.limits !=null && data.data[i].resources.limits.cpu!=null){
							$('#container_cpu').val(data.data[i].resources.limits.cpu);
							$('#container_mem').val(data.data[i].resources.limits.memory);
						}
						//
						
					}
				}
			}
			$('#myModal').modal();			
		});	
		
	}
</script>
</body>
</html>
